<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #box {
        margin: 100px auto;
        width: 1300px;
        height: 800px;
        position: relative;
        border: 1px solid #ccc;
        background-color: black;
    }

    span {
        color: rgb(27, 226, 53);
        /* background-color: chartreuse; */
        font-size: 30px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

<body>
    <button id="btn">闪起来</button>
    <button id="stop">给我停</button>
    <div id="box"></div>
</body>
<script>
    var timer = '';
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    var stop = document.getElementById('stop');


    Math.random()
    btn.onclick = function () {
        timer = setInterval(function () {
            var x = Math.random() * 1000;
            var y = Math.random() * 1000;
            box.innerHTML = '<span>☆</span>';
            // box.firstChild.style.left = x + 'px';
            // box.firstChild.style.top = y + 'px';
            box.firstElementChild.style.left = x + 'px';
            box.firstElementChild.style.top = y + 'px';
            // var span = document.getElementsByTagName('span')[0];

            // span.style.left = x + 'px';
            // span.style.top = y + 'px';

            // console.log(box.innerHTML);

        }, 100)
    }
    stop.onclick = function () {
        clearInterval(timer);
    }
</script>

</html>